<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>list数据转树形菜单数据</title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<script type="text/javascript">
			//根据父id查找所有子级数据-！！！注意是所有子级数据，以及依赖于子级的子级数据
	        //应用场景:常用于前端要实现树形菜单效果，然而后台返回数据是的list列表数据，但是前端要展示的是树形结构数据，所以需要我们单独编写方法自己处理函数

			//数据-id 为当前行id，parendId为当前行父级id
			var data = [

			{ name: '根目录1' , id: 1, parentId: 0 }, 

			{ name: '根目录2' , id: 2, parentId: 0 }, 

			{ name: '子目录1-1' , id: 3, parentId: 1 },

			{name: '子目录1-2' , id: 4, parentId: 1 },

			{name: '子目录2-1' , id: 5, parentId: 2 },

			{name: '孙目录1-2-1' , id: 6, parentId: 4 }

			];

			//思路:1.遍历数据先拿最外层数据,如何获取？判断当前行父级id是否等于最大的根节点值 2.在判断当前id下有无子孙id, 如果有就给当前行增加children 属性,值为查找到的子孙id
		    function Tree(data, pid) {

				let arr = [];
				// 1.遍历数据先拿最外层数据,如何获取？判断当前行父级id是否等于最大的根节点值
				data.forEach((item, index) => {

					if (item.parentId == pid) {

						//2.判断当前id下有无子孙id, 如果有就给当前行增加children 属性,值为查找到的子孙id
						let len = Tree(data, data[index].id)
						// console.log(‘查找子孙元素’,len)

						if (len.length > 0) {
							data[index].children = len
						}
						arr.push(data[index])
					}

				})

				return arr

			}
		    //比如传入父id是0，那它下面的所有子级数据都要返回。同时依赖于子级的子级数据也要返回。
		    console.log(Tree(data , 0));  //返回数组对象
	//[
		// 	 {name: "根目录1", id: 1, parentId: 0,
		// 		children: [
		// 			   {name: "目录1-1", id: 3, parentId: 1},
		// 			   {name: "目录1-2", id: 4, parentId: 1,children:[{name: "目录1-2-1", id: 6, parentId: 4}]},
		// 			     ]
		// 	},
		// 	{name: "根目录2", id: 2, parentId: 0,
		// 		 children: [{name: "目录2-1", id: 5, parentId: 2}]
		// 	}
	// ]



		</script>
	</body>
</html>
